ToDoMore

土豆末

0%

Vue学习计划基础笔记(二) - 模板语法、计算属性和侦听器

发表于 更新于 分类于 ，

目标：

  1. 熟练使用 vue 的模板语法
  2. 理解计算属性与侦听器的用法以及应用场景

模板语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="app">

<!-- 以下说绑定的值都可以写成js表达式形式 -->

<!-- {{}}: 双大括弧语法 -->

<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->

<p>

first: {{firstName}}<br>

last: {{lastName}}<br>

{{firstName + ' ' + lastName}}

</p>

<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->

<!-- 使用v-html: html会被解析 -->

<p v-html="test"></p>

<!-- 使用v-text: html不会被解析,直接以文本输出 -->

<p v-text="test">123</p>



<!-- 标签属性绑定v-bind, 简写":" -->

<img v-bind:height="imgHeight" :width="imgWidth" style="border: 1px solid #000"></img>

</div>



<script>

var vm = new Vue({

el: '#app',

data: {

firstName: 'Chi',

lastName: 'Chan',

test: '<h1>哈哈哈<h1>',

imgHeight: '200px',

imgWidth: 200

}

})

</script>

计算属性(computed)

计算属性和方法时不一样, 计算属性是基于他们的依赖,进行缓存, 当计算属性的相关变量发生变化才会重新进行计算, 否则都是直接从缓存中读取之前的计算结果.(这样可以降低性能的消耗)
计算属性有 getter 和 setter, 可以分别定义其设值和取值时会执行的函数.

侦听器(watch)

如果我们只需要侦听一个数据,或者要在一个数据变化的时候执行一些操作(去改动多个数据),而且这些改动可能和这个数据没有依赖关系, 那么就可以使用侦听器了.
侦听器,可以侦听一个数据的变化,然后执行相应的操作.

使用场景

  1. watch 擅长处理的场景：一个数据影响多个数据 (一个变化)
  2. computed 擅长处理的场景：一个数据受多个数据影响 (多个变化,最终返回一个数据)
  3. method 相对普通,需要主动去触发,还可能会让代码变得复杂,而且如果像以上这些场景的话,使用 method 会有更大的性能消耗.